<template>

  <el-container class="home-container">

    <el-backtop :visibility-height="200" :right="40" :bottom="40">
      <div>
        <i class="el-icon-top"></i>
      </div>
    </el-backtop>
    <!-- head -->
    <el-header class="bg1">
      <div>
        <img src="" alt="">
        <h2 style="font-family:KaiTi">
          <i class="el-icon-reading"></i>
          <span>同济大学图书馆</span>
        </h2>aaaaa
      </div>

    </el-header>

    <el-header style="  justify-content: right;">
      <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect"
        background-color="#303133" text-color="#fff" active-text-color="#ffd04b">
        <el-menu-item index="5">图书馆首页</el-menu-item>
        <el-menu-item index="1">图书分布</el-menu-item>
        <el-menu-item index="3">论坛中心</el-menu-item>
        <el-menu-item index="4">场地预约</el-menu-item>
        <el-menu-item index="6">馆藏目录</el-menu-item>
        <el-submenu index="2">
          <template slot="title">个人主页</template>
          <el-menu-item index="2-1">section1</el-menu-item>
          <el-menu-item index="2-2">section2</el-menu-item>
          <el-menu-item index="2-3">section3</el-menu-item>
        </el-submenu>


      </el-menu>
    </el-header>
    <!-- body -->
    <el-container>
      <!-- aside -->
      <el-aside :width="iscollapse ? '64px' : '200px'">
        <!-- 侧边栏菜单 -->
        <div class="toggle-button" @click="toggleCollapse">|||</div>
        <el-menu background-color="#333744" text-color="#fff" active-text-color="#ffd04b" :router="true"
          :collapse="iscollapse" :collapse-transition="false">
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>读者服务</span>
            </template>
            <!-- 二级菜单 -->
            <el-menu-item-group>
              <template slot="title">读者服务</template>
              <el-menu-item index="ElSubmenu.path" @click="update">预约</el-menu-item>
              <el-menu-item index="1-2">借阅</el-menu-item>
              <el-menu-item index="1-3">指南</el-menu-item>
            </el-menu-item-group>
         
          </el-submenu>
          <el-menu-item index="2">
            <i class="el-icon-s-opportunity"></i>
            <span slot="title">文献资源</span>
          </el-menu-item>
          <el-menu-item index="3">
            <i class="el-icon-document"></i>
            <span slot="title">文化活动</span>
          </el-menu-item>
          <el-menu-item index="4">
            <i class="el-icon-edit-outline"></i>
            <span slot="title">互动交流</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <!-- main -->

      <el-main>


        <div class="content">

          <h1 style="color:rgba(164, 58, 58, 0.688);font-size:30px">
            &nbsp;&nbsp;&nbsp;
            图书详情
          </h1>

          <!-- 第1页 -->
          <div class="page">
            <div class="picture1">
              <img src="./assets/book.jpg" alt="" width="400px" title="图书封面">
            </div>

            <div class="booktext" style="padding-left:100px">
              <p class="title">
                <b><i>追风筝的人</i></b>

              </p>
              <br>
              <div class="border">

              </div>

              <p style="font-size: 17px;color: rgb(67, 74, 102);">
                <b>卡得勒·胡塞尼 著</b>
                <br>
                <b> 李继宏 译</b>
                <br>
                <b>上海人民出版社 2006-5</b>
                <br><br>
              </p>

              <p class='grey'>
                For you, thousand times over.
              </p>
              <br>
              <p style="font-size: 17px;">
                <b>ISBN: 9787208061644</b>

                <br>
                <b>馆藏编号：xxxxxxxxxxxx</b>

                <br><br>

                <el-rate v-model="value1" disabled show-score text-color="#ff9900" score-template="{value}">
                </el-rate>
                <br><br>
              </p>

            <el-button type="primary" plain @click="dialog = true">立即借阅</el-button>

              <el-drawer title="图书借阅" :before-close="handleClose" :visible.sync="dialog" direction="rtl"
                custom-class="demo-drawer" ref="drawer">
                <div class="demo-drawer__content">
                  <el-form :model="form">
                    <el-form-item label="校区名称" :label-width="formLabelWidth">
                      <el-input v-model="form.name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="借阅期限" :label-width="formLabelWidth">

                      <el-select v-model="form.region" placeholder="请选择节约期限" >
                        <el-option label="14天" value="shanghai"></el-option>
                        <el-option label="30天" value="beijing"></el-option>
                      </el-select>

                    </el-form-item>

                  </el-form>
                  <div class="demo-drawer__footer">
                    <el-button type="primary" plain @click="$refs.drawer.closeDrawer()" >确定
                       </el-button>
                  </div>
                </div>
              </el-drawer>

            </div>

          </div>



          <br><br><br><br><br>

          <div class="border">

          </div>

          <br><br><br><br>

          <h1 style="color:rgba(164, 58, 58, 0.688);font-size:30px">
            <br>
            &nbsp;&nbsp;&nbsp;
            图书详情
          </h1>

          <br><br>
          <p style="font-size: 23px; ">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <b>内容简介</b>

          </p>
          <!-- 第2页 -->
          <div class="page">

            <div class="booktext" style="padding-top: 60px;padding-right: 40px;line-height:40px;">


              <p style="font-size: 17px; text-align: left;">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                12岁的阿富汗富家少爷阿米尔与仆人哈桑情同手足。然而，在一场风筝比赛后，发生
                了一件悲惨不堪的事，阿米尔为自己的懦弱感到自责和痛苦，逼走了哈桑，不久，自
                己也跟随父亲逃往美国。
              </p>

              <p style="font-size: 17px; text-align: left;">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                成年后的阿米尔始终无法原谅自己当年对哈桑的背叛。为了赎罪，阿米尔再度踏上暌
                违二十多年的故乡，希望能为不幸的好友尽最后一点心力，却发现一个惊天谎言，儿
                时的噩梦再度重演，阿米尔该如何抉择？
              </p>

              <p style="font-size: 17px; text-align: left;">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                故事如此残忍而又美丽，作者以温暖细腻的笔法勾勒人性的本质与救赎，读来令人荡
                气回肠。
              </p>
            </div>

            <div class="picture2">
              <img src="./assets/book.jpg" alt="" width="350px" title="图书封面">
            </div>

          </div>


          <h1 style="color:rgba(164, 58, 58, 0.688);font-size:30px">
            <br>
            &nbsp;&nbsp;&nbsp;
            图书详情
          </h1>

          <!-- 第3页 -->
          <div class="page">

            <div class="picture3">
              <img src="./assets/author.jpg" alt="" width="300px" title="作者照片">
            </div>


            <div class="booktext">
              <p style="font-size: 23px;">
                <b>作者简介</b>

              </p>

              <p style="font-size: 16px; text-align: left; line-height: 40px;">
                &nbsp;&nbsp;&nbsp;&nbsp;
                卡勒德·胡赛尼（Khaled
                Hosseini），1965年生于阿富汗喀布尔市，后随父亲迁往美国。胡赛尼毕业于加州大学圣地亚哥医学系，现居加州。“立志拂去蒙在阿富汗普通民众面孔的尘灰，将背后灵魂的悸动展示给世人。”著有小说《追风筝的人》(The
                Kite Runner，2003）、《灿烂千阳》(A Thousand Splendid Suns，2007)、《群山回唱》（And the Mountains
                Echoed,2013）。作品全球销量超过4000万册。2006年，因其作品巨大的国际影响力，胡赛尼获得联合国人道主义奖，并受邀担任联合国难民署亲善大使。
              </p>

            </div>

          </div>

          <br><br><br>

          <div class="border">

          </div>
          <br>
          <h1 style="color:rgba(164, 58, 58, 0.688);font-size:30px">
            &nbsp;&nbsp;&nbsp;
            评价与反馈
          </h1>
          <br><br>

          <!-- 尾页 -->
          <div style=" display: inline-block;font-size: 18px;padding-left: 80px;">
            <div class="block">
              <span class="demonstration">请选择您对本书的评价：</span>
              <br><br>
              <el-rate v-model="value1" show-text=""></el-rate>
            </div>


            <br><br><br>

            <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder=" 如果需要反馈书籍损毁情况，请在此输入："
              v-model="textarea2" style="width:600px">
            </el-input>

            <br><br><br>
          </div>

        </div>

      </el-main>

    </el-container>
  </el-container>

</template>

<script>

export default {
  name: 'app',

  data() {
    return {
      activeIndex: '1',
      activeIndex2: '1',
      //是否折叠
      iscollapse: true,

      //本书评分
      value: 4.5,
      value1: 5,

      textarea2: '',

      //抽屉
      drawer: false,

       form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formLabelWidth: '80px',
      timer: null,
      dialog: false,

    };
  },

  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    //点击按钮，切换菜单折叠
    toggleCollapse() {
      this.iscollapse = !this.iscollapse
    },
    update() {

    },

  }

}
</script>


<style  scoped>


.home-container {
  height: 700px;

}


.bg1{
  background-image: url(./assets/bg3.png);
}
.el-header {
  background-color: #303133;

  display: flex;
  justify-content: space-between;
  align-items: center;
  color: aliceblue;
  font-size: 25px;
}

.el-aside {
  background-color: #333744;

}


.el-main {
  background-color: rgb(248, 243, 243);
  
}

.el-menu {
  border: none;
}

.toggle-button {
  color: white;
  text-align: center;
  line-height: 34px;
  letter-spacing: 0.2em;
  cursor: pointer;
}


 .title{
            color: rgb(50, 76, 126);
            font-size: 35px;
                
        }
.grey {
  color: grey;
  font-size: 18px;
}

a:hover {
  color: red;
}

.content {
  /* background-color: rgb(248, 243, 243); */
  
  width: 1500px;
  padding: 30px;

 
}

.booktext {
  display: inline-block;
  text-align: center;
  padding: 40px;
  height: 800px;
  width: 500px;
  float: left;

}

.border {
  height: 2px;
 

  background-color: brown;
}

.picture1 {
  height: 700px;
  width: 400px;
  padding-top: 60px;
  float: left;
}

.picture2 {
  height: 700px;
  width: 400px;
  padding-left: 100px;
  float: left;
}

.picture3 {
  height: 700px;
  width: 400px;
  padding: 50px;
  float: left;
}

.page {
  width: 1100px;
  height: 900px;
  padding-left: 100px;
}
</style>

